<template>
  <page-header-wrapper :tabList="tabList" :tab-active-key="activeKey" :tab-change="handleTabChange">
    <template #content>申请编号：{{ applyNO }}</template>
    <info v-show="activeKey === 'info'" :applyNO.sync="applyNO" />
    <div v-show="activeKey === 'infoLog'">
      <infoLog v-if="tabClick[1]" />
    </div>
    <div v-show="activeKey === 'houseLog'">
      <houseLog v-if="tabClick[2]" />
    </div>
  </page-header-wrapper>
</template>

<script>
import houseLog from '@/views/commonViews/components/houseLog.vue'
import infoLog from '@/views/commonViews/components/infoLog'
import info from '@/views/commonViews/components/info'
export default {
  components: {
    houseLog,
    infoLog,
    info
  },
  data () {
    return {
      tabList: [
        { key: 'info', tab: '自行备案基本信息' },
        { key: 'infoLog', tab: '信息变更记录' },
        { key: 'houseLog', tab: '房屋分配记录' }
      ],
      activeKey: 'info',
      applyNO: '',
      // 是否加载
      tabClick: [true, false, false]
    }
  },
  methods: {
    handleTabChange (key) {
      this.activeKey = key
      const index = this.tabList.findIndex((e) => e.key === key)
      this.tabClick[index] = true
    }
  }
}
</script>
<style lang="less" scoped>
</style>
